<template>
	<div class="add-model popup">
		<el-form
			class="content"
			ref="informForm"
			label-width="80px"
			:rules="RULE_ADD_SCHEME"
			:model="data"
		>
			<h3 class="center">添加scheme</h3>

			<el-form-item
				label="scheme"
				prop="scheme"
			>
				<el-input
					v-model="data.scheme"
					placeholder="请输入scheme"
				/>
			</el-form-item>
			<el-form-item
				label="描述"
				prop="desc"
			>
				<el-input
					v-model="data.desc"
					placeholder="请输入描述内容"
				/>
			</el-form-item>
			<el-form-item class="btns">
				<el-button
					class="sure"
					type="primary"
					plain
					@click="onclickSure"
				>
					确认
				</el-button>
				<el-button
					type="info"
					@click="$emit('close')"
				>
					取消
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { RULE_ADD_SCHEME } from '@exploit/constants/rule'
export default {
  data() {
    return {
      RULE_ADD_SCHEME,
      data: {
        scheme: '',
        desc: ''
      }
    }
  },
  methods: {
    /**
     * 点击确认
     */
    onclickSure() {
      this.$refs.informForm.validate(valid => {
        if (valid) {
          this.$emit('create', this.data)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.add-model {
  .content {
    width: 400px;

    h3 {
      margin-bottom: 10px;
      color: $blue;
    }
  }
}
</style>
